<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>达达微博</title>
    <link rel="stylesheet" href="index.css">
    <style>
        body {
            background-image: url('./gd.jpg'); /* 替换为实际背景图片URL */
            font-family: 'Arial', sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }

        #app {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #007BFF;
            color: #fff;
            padding: 10px 20px;
            border-radius: 8px 8px 0 0;
        }

        header h1 {
            margin: 0;
            font-size: 24px;
        }

        nav {
            display: flex;
            gap: 10px;
        }

        nav div {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        nav a {
            color: #fff;
            text-decoration: none;
            padding: 8px 12px;
            border-radius: 4px;
            transition: background-color 0.3s;
        }

        nav a:hover {
            background-color: #0056b3;
        }

        main {
            padding: 20px;
        }

        .weibo-item {
            background-color: #fff;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }

        .weibo-item h3 {
            margin: 0;
            font-size: 18px;
            color: #333;
        }

        .weibo-item a {
            color: #007BFF;
            text-decoration: none;
        }

        .weibo-item a:hover {
            text-decoration: underline;
        }

        .nickname {
            color: #007BFF;
            font-weight: bold;
        }
    </style>
</head>
<body>

<div id="app">
    <header>
        <h1>微博首页</h1>
        <nav>
            <div v-if="isLogin">
                <h3>欢迎<span class="nickname">{{user.nickname}}</span>回来！</h3>
                <a href="/insert.html">发微博</a>
                <a href="javascript:void(0)" @click="logout()">退出登录</a>
            </div>
            <div v-else>
                <a href="/reg.html">注册</a>
                <a href="/login.html">登录</a>
            </div>
        </nav>
    </header>
    <main>
        <div v-for="w in arr" class="weibo-item">
            <h3>
                <a :href="'/detail.html?id=' + w.id">
                    <span class="nickname">{{w.nickname}}</span>: {{w.content}}
                </a>
            </h3>
        </div>
    </main>
</div>

<!-- 引入axios和vue的框架文件 -->
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script>
    let v = new Vue({
        el: "#app",
        data: {
            isLogin: false,
            user: {},
            arr: []
        },
        methods: {
            logout() {
                axios.get("/v1/users/logout").then(function (response) {
                    v.isLogin = false;
                });
            }
        },
        created: function () {
            axios.get("/v1/users/currentUser").then(function (response) {
                v.user = response.data;
                if (response.data === "") {
                    v.isLogin = false;
                } else {
                    v.isLogin = true;
                }
            });

            axios.get("/v1/weibo/selectIndex").then(function (response) {
                v.arr = response.data;
            });
        }
    });
</script>

</body>
</html>
